<template>
    <div>
      <!-- 子组件模板 -->
      <h3>子组件</h3>
      <div>
        <button @click="sendMessage">发送消息到父组件</button>
        <button @click="sendGlobalMessage">发送全局消息</button>
        <h3>接收到的消息：</h3>
        <p>{{ receivedMessage }}</p>
        <h3>接收到子组件的消息：</h3>
        <p>{{ childMessage.text}} - {{ childMessage.timestamp }} </p>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  /**
   * Mitt 事件总线详解 - 子组件部分
   * 
   * 1. 概念：
   *    Mitt 是一个微型的事件发布/订阅库，用于组件间通信。
   *    它可以实现任意组件之间的通信，不受组件层级关系的限制。
   * 
   * 2. 特点：
   *    - 轻量级：体积小，API 简单
   *    - 类型安全：支持 TypeScript
   *    - 通用性：可用于任何组件间通信，不限于父子组件
   *    - 解耦性：发送方和接收方不需要直接引用对方
   * 
   * 3. 基本使用流程：
   *    - 创建一个全局的 mitt 实例
   *    - 在需要发送事件的组件中引入并调用 emit 方法
   *    - 在需要接收事件的组件中引入并调用 on 方法订阅事件
   */
  
  // 引入全局 mitt 实例
  import emitter from '@/utils/eventBus';
  
  // 发送消息到父组件（通过特定的事件名称）
  function sendMessage() {
    // emit 方法接收两个参数：事件名和要传递的数据
    emitter.emit('child-message', {
      text: '这是来自子组件的消息1',
      timestamp: new Date().toLocaleTimeString()
    });
  }
  
  // 发送全局消息（可被任何监听此事件的组件接收）
  function sendGlobalMessage() {
    emitter.emit('global-message', '这是一条全局广播消息');
  }
  
  /**
   * 4. 在子组件中接收事件：
   *    - 可以在子组件中也监听事件
   *    - 适用于兄弟组件通信或跨多层级组件通信
   */
  import { onMounted, onUnmounted,ref ,reactive} from 'vue';
  
  const receivedMessage = ref('');
  const childMessage = reactive({});
  // 在组件挂载时设置事件监听
  onMounted(() => {
    // 监听来自父组件或其他组件的消息
    emitter.on('parent-message', (data) => {
      console.log('子组件收到消息:', data);
      receivedMessage.value = data;
    });

    emitter.on('child-send', (data:object) => {
      console.log('子组件收到消息:', data);
      Object.assign(childMessage, data);
    });
  });
  
  // 在组件卸载时移除事件监听，防止内存泄漏
  onUnmounted(() => {
    // 移除特定事件监听
    emitter.off('parent-message');
    emitter.off('child-send');
    
    // 或者移除所有事件监听
    // emitter.all.clear();
  });
  
  /**
   * 5. Mitt 的优缺点：
   * 
   * 优点：
   * - 使用简单，API 少且直观
   * - 可实现任意组件间的通信
   * - 不依赖 Vue 特定版本，兼容性好
   * 
   * 缺点：
   * - 全局事件总线可能导致代码难以追踪和维护
   * - 需要手动管理事件的订阅和取消订阅
   * - 过度使用可能导致应用状态管理混乱
   */
  </script>
  
  <style scoped>
  /* 子组件样式 */
  div {
    background: linear-gradient(to right, #f6d365, #fda085);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    letter-spacing: 1px;
  }

  button {
    background-color: white;
    color: #ff7e5f;
    border: none;
    padding: 10px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  button:hover {
    background-color: #ff7e5f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  </style>